<template>
    <div class="container">
        <div class="handle-box">
            <span>字典名称：</span>
            <el-input v-model="query.dicname" placeholder="请输入内容" class="handle-input mr10"></el-input>

            <span>状态:</span>
            <el-select class="handle-select mr10" v-model="query.status" placeholder="请选择活动区域">
                <el-option label="请选择状态" value="0"></el-option>
                <el-option label="启用" value="1"></el-option>
                <el-option label="未启用" value="2"></el-option>
            </el-select>
            <el-button type="primary" icon="el-icon-search" @click="getData()">筛选</el-button>
            <el-button icon="el-icon-delete" @click="clear"></el-button>
        </div>
        <el-button type="primary" @click="handleAdd">新增字典</el-button>
        <el-table :data="tableData" style="width: 100%" max-height="250">
            <el-table-column fixed prop="dicname" label="名称" width="width" align="center">
            </el-table-column>
            <el-table-column prop="sort" label="排序" width="width" align="center">
            </el-table-column>
            <el-table-column label="操作" width="300" align="center" fixed="right">
                <template slot-scope="scope">
                    <el-button type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination @size-change="handleSizeChange" @current-change="handlePageChange" :current-page="query.pageNum"
                :page-sizes="[1, 2, 3, 4]" :page-size="2" layout="total, sizes, prev, pager, next, jumper"
                :total="pageTotal">
            </el-pagination>
        </div>

        <el-dialog :visible.sync="editVisible" width="50%" :append-to-body="true" @close="cancle">
            <AddDictionary v-if="isAdd" :isSon="isSon"></AddDictionary>
            <EditDictionary v-if="isEdit" :isSon="isSon" :id="rowId"></EditDictionary>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancle">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { selectDict2Byparntid, addDict2, updateDict2, deleteDictById } from '@/api/systemManager'
import AddDictionary from './AddDictionary';
import EditDictionary from './EditDictionary'
import bus from '@/components/common/bus';
export default {
    data() {
        return {
            query: {
                dicname: '',
                pageNum: 1,
                pageSize: 2,
                status: '0',
                id: this.id
            },
            tableData: [],
            pageTotal: 0,
            isAdd: false,
            isEdit: false,
            editVisible: false,
            isSon: false,
            form: {},
            rowId: ''
        };
    },
    props: ['id'],
    mounted() {
        this.getData()
        bus.$on('getForm2', (val) => {
            this.form = val
        })

    },
    components: {
        AddDictionary,
        EditDictionary
    },
    methods: {
        //清空用户输入
        clear() {
            this.query = {
                dicname: '',
                pageNum: 1,
                pageSize: 2,
                status: '0',
                id: this.id
            }
            this.getData()
        },
        async getData() {
            let result = await selectDict2Byparntid(this.query)
            if (result.code == 200) {
                this.tableData = result.data.list
                this.pageTotal = result.data.total
            }
        },
        handleEdit(index, row) {
            this.editVisible = true
            this.isEdit = true
            this.isSon = true
            this.rowId = row.id

        },
        async handleDelete(index, row) {
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            }).then(async () => {
                let result = await deleteDictById({ id: row.id })
                if (result.code == 200) {
                    this.$message({ message: result.msg, type: 'success' })
                    this.getData()
                }
            })

        },
        handleAdd() {
            this.editVisible = true
            this.isAdd = true
            this.isSon = true
        },
        cancle() {
            this.editVisible = false
            this.isAdd = false
            this.isEdit = false
            this.isSon = false
        },
        async saveEdit() {
            this.form.parentid = this.id
            let result
            if (this.isAdd) {
                result = await addDict2(this.form)
            } else {
                result = await updateDict2(this.form)
            }
            if (result.code == 200) {
                this.$message({ message: result.msg, type: 'success' })
                this.getData()
            }

            this.cancle()
        },
        //页码改变时
        handlePageChange(val) {
            this.query.pageNum = val
            this.getData();
        },
        //一页大小改变时
        handleSizeChange(val) {
            this.query.pageSize = val
            this.getData();
        },
    },

};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 200px;
}

.handle-input {
    width: 200px;
    display: inline-block;
}

.mr10 {
    margin-right: 10px;
}
</style>
